<template>
  <div class="hello">
    <el-row>
      <el-col :span="6">
        <el-input v-model="sendMessageData" :span="6" placeholder="消息"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="sendAccount" :span="4" placeholder="QQ号"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button @click="sendMessage">发送消息</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <p>接收消息：{{ message }}</p>
      </el-col>
      <el-col :span="6">
        <el-button @click="getMessage">接收消息</el-button>
      </el-col>
    </el-row>
    <el-divider>消息记录</el-divider>



  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'HelloWorld',
  data() {
    return {
      message: '123',
      data: null,
      sendMessageData: '测试',
      sendAccount: '857826959'
    }
  },
  methods: {
    getMessage() {
      axios.get("http://localhost:8080").then((res) => {
        if (res.status === 200) {
          this.message = res.data;
        }
      }).catch((res)=>{
          console.log(res.code)
      })
    },
    sendMessage() {
      axios.get("http://localhost:8080/send/" + this.sendMessageData + "/" + this.sendAccount)
          .catch((res)=>{
              console.log(res.code)
          });
    }
  },
  mounted() {
    this.getMessage();
  },
  created() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
